<template>
    <div class="BtnGroupsTab">
      <div class="BtnGroupsTab--item" :class="{active: item.value === activeTab}" v-for="item in groups" :key="item.value" @click="changeTab(item)">
        {{item.name}}
      </div>
    </div>
</template>

<script setup>
import HelloWorld from "@/App.vue";

const $emit = defineEmits(['change'])
const props = defineProps({
  groups: {
    type: Array,
    default () {
      return [
        // {
        //   name: '近七天',
        //   value: '1'
        // },
        // {
        //   name: '近一月',
        //   value: '2'
        // },
        // {
        //   name: '近三月',
        //   value: '3'
        // },
      ]
    }
  },
  active: { // 默认选中的tab
    type: [String, Array],
    default: ''
  }
})

const activeTab = ref('')

onMounted(() => {
  if (props.active) {
    activeTab.value = props.active
  } else {
    activeTab.value = props.groups[0].value
  }
})

watch(props.active, () => {
  activeTab.value = props.active
})

/**
 * 切换 tab 页签
 * @param info
 */
function changeTab (info) {
  activeTab.value = info.value
  $emit('change', info.value)
}

</script>

<style lang="scss" scoped>
.BtnGroupsTab{
  height: 25px;
  line-height: 25px;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  //border-image: -webkit-linear-gradient(red,yellow) 30 30;
  //border-image: -moz-linear-gradient(red,yellow) 30 30;
  //border-image: linear-gradient(red,yellow) 30 30;
  border-image: linear-gradient(to right, rgba(104, 168, 216,0), rgb(102, 203, 240) 50%, rgba(104, 168, 216,0)) 1;
  display: flex;
  &--item{
    flex: 1;
    text-align: center;
    cursor: pointer;

    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0;
    font-weight: 400;
    width: 64px;
    height: 25px;
    &.active{
      background-image: url('@/assets/images/armyScreen/日期tab_点击@2x.png');
      background-size: 100% 100%;
    }
  }
}
</style>
